<template>
    <div>
        <!-- {{ questionDetail }} -->
          <!-- {{ from }} -->
        <!-- 题型 -->
            <span class="text-gray-600 text-sm font-bold" v-if="from=='试卷'">{{ questionDetail.questionNumber }}</span>
            <span class="text-gray-400">({{ questionDetail.questionType }}<i v-if="from=='试卷'">,{{ questionDetail.questionScore }}分</i>)</span>
            <div class="text-gray-600 text-sm mt-1">
                <!-- 题干 -->
                <!-- <span>{{ questionDetail.questionContent }}</span> -->
                <span v-html="questionDetail.questionContent"></span>
                <!-- 单选多选题的选项 -->
                <ul v-if="questionDetail.questionType === '单选题' || questionDetail.questionType === '多选题'" class="space-y-6 ">
                   <li class="mt-3 pl-6 space-x-1 flex items-center" v-for="(item,index) in questionDetail.options" :key="index">
                        <div  :class="['border rounded-full w-8 h-8  flex items-center justify-center',
                        questionDetail.answer.includes(String.fromCharCode(65 + index))?'bg-blue-500 text-white':'']" v-if="!item.option">
                            {{  String.fromCharCode(65 + index) }}
                        </div>
                        <div :class="['border rounded-full w-8 h-8  flex items-center justify-center',questionDetail.answer.includes(item.option)?'bg-blue-500 text-white':'']"  v-else>
                           <span> {{ item.option  }}</span>
                        </div>
                        <span >{{ item.content  }}</span>
                   </li >                
                </ul>
                <!-- 如果是判断题 -->
                 <ul v-else-if="questionDetail.questionType === '判断题'">
                    <li class="mt-3 pl-6 flex items-center space-x-1" >
                        <div :class="['border rounded-full w-8 h-8  flex items-center justify-center',
                          questionDetail.answer=='对'?'bg-blue-500 text-white':'']" >A</div>
                        <span>对</span>
                    </li>
                    <li class="mt-3 pl-6 flex items-center space-x-1" >
                        <div :class="['border rounded-full w-8 h-8  flex items-center justify-center',
                          questionDetail.answer=='错'?'bg-blue-500 text-white':'']" >B</div>
                        <span>错</span>
                    </li>
                    
                 </ul> 
                <!-- 答案 -->
                <div class="mt-4 pl-6">
                    <b>答案:</b>
                    <span v-for="(item,index) in questionDetail.answer" :key="index">
                        {{ item }}
                    </span >
                </div>
                <!-- 答案解析 难易程度  知识点  -->
                 <div class="mt-2 pl-6 text-gray-400 text-sm"> 
                    <b>答案解析:</b>
                    <span v-text="questionDetail.analysis"></span>
                </div>
                 <div class="mt-2 pl-6 text-gray-400 text-sm"> 
                    <b>难易:</b>
                    <span v-text="questionDetail.questionDifficulty"></span>
                </div>
                 <div class="mt-2 pl-6 text-gray-400 text-sm"> 
                    <b>知识点:</b>
                    <span v-text="questionDetail.knowledgePoints"></span>
                </div>
            </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, toRaw, computed, onMounted, onBeforeUnmount } from 'vue'
const props = defineProps({
    questionDetail: { type: Object, default: () => ({}) },
    from: { type: String, default: '' }
})

</script >
<style lang="less" scoped>
</style>